<template>
  <div ref="videoEl" class="video-render">
    <video autoplay controls></video>
    <!-- <video ref="fakeVideoEl" class="fake"></video> -->
  </div>
</template>

<script>
import { ref, markRaw, shallowRef, watch, inject, onBeforeUnmount, nextTick } from 'vue'

import BASE_IMG from 'static/images/03.jpg'
import { useVideoPlay } from '../../stores/VideoPlay'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoRender',
  props: {
    src: {
      default: ''
    }
  },
  emits: {
    initStart: null,
    initSuccessed: null,
    initFailed: null,
    error: (e) => e,
    canplay: (e) => e,
    timeupdate: (e) => e,
    ended: (e) => e,
    play: (e) => e,
    pause: (e) => e,
    waiting: (e) => e,
    playing: (e) => e
  },
  setup(props, { emit }) {
    const VideoPlayer = useVideoPlay()
    const videoEl = ref()
    const videoInstance = shallowRef(null)

    /**
     * 视频解析为source格式
     * @param {播放地址} url
     */
    function videoUrlToSource(url) {
      let type = ''
      const lastKey = url.split('.').pop()
      switch (lastKey) {
        case 'm3u8': {
          type = 'application/x-mpegURL'
          break
        }
        case 'mp4': {
          type = 'video/mp4'
          break
        }
        default: {
          if (lastKey.length > 4) {
            type = 'video/mp4'
            break
          } else {
            type = `video/${lastKey}`
            break
          }
        }
      }
      return {
        src: url,
        type
      }
    }

    /**
     *初始化video
     * @param {*视频盒子节点} el
     * @param {*视频地址} url
     */
    function videoInit(el, url) {
      if (!el || !url) return
      el.innerHTML = ''
      el.innerHTML = `<video id="my-video" class="video-js"></video>`
      emit('initStart')
      try {
        videoInstance.value = markRaw(
          videojs('my-video', {
            controls: true, // 是否显示控制条
            preload: 'auto',
            autoplay: false,
            muted: false, // 是否静音
            fluid: true,
            sources: [videoUrlToSource(url)]
          })
        )
        emit('initSuccessed')
        return videoInstance.value
      } catch (err) {
        emit('initFailed')
        console.log(err, 'init')
        return null
      }
    }

    watch(
      VideoPlayer,
      () => {
        if (!VideoPlayer.playUrl) return

        // 销毁videojs
        if (videoInstance.value) {
          videoInstance.value.dispose()
        }
        if (videoEl.value) {
          videoInit(videoEl.value, VideoPlayer.playUrl)
        } else {
          nextTick(() => {
            videoInit(videoEl.value, VideoPlayer.playUrl)
          })
        }
      },
      { immediate: true }
    )

    onBeforeUnmount(() => {
      if (VideoPlayer.playUrl) {
        VideoPlayer.playUrl = ''
      }
      if (videoInstance.value) {
        videoInstance.value.dispose()
      }
    })

    return {
      BASE_IMG,
      videoEl
    }
  }
}
</script>

<style lang="scss" scoped>
.video-render {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  overflow: hidden;
  video {
    width: auto !important;
    height: 100% !important;
  }
}
</style>
